<template>
  <el-dialog v-model="dialogVisible" title="新增权限" width="500px" :close-on-click-modal="false" destroy-on-close>
    <!-- 基础信息展示 -->
    <div style="max-height: 500px; overflow: auto">
      <el-form ref="formRef" :rules="rules" :model="formData" label-width="140px">
        <el-form-item label="权限名称 :" prop="name">
          <el-input v-model="formData.name" placeholder="请输入权限名称" />
        </el-form-item>
        <el-form-item label="权限标识 :" prop="code">
          <el-input v-model="formData.code" placeholder="请输入权限标识" />
        </el-form-item>
      </el-form>
    </div>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleSubmit" :loading="loading"> 确 定 </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts" name="PermissionModal">
import { ref, reactive, computed, watch } from "vue";
import { ElMessage, type FormInstance, type FormItemRule } from "element-plus";
import { addPlatformAuthApi, editPlatformAuthApi } from "@/api/modules/permission";
interface Props {
  modelValue: boolean;
  id?: number | undefined;
  initParams?: FormDataProps;
}
interface FormDataProps {
  name: string | undefined;
  code: string | undefined;
}

const props = withDefaults(defineProps<Props>(), {
  modelValue: false,
  id: undefined,
  initParams: () => ({
    name: "",
    code: ""
  })
});

const emit = defineEmits(["update:modelValue", "success"]);

const dialogVisible = computed({
  get: () => props.modelValue,
  set: val => {
    emit("update:modelValue", val);
  }
});

watch(
  () => props.modelValue,
  val => {
    if (val && props.initParams) {
      formData.name = props.initParams.name;
      formData.code = props.initParams.code;
    }
  }
);

const formRef = ref<FormInstance>();
const loading = ref(false);

const formData = reactive<FormDataProps>({
  name: "",
  code: ""
});

const rules = {
  name: [{ required: true, message: "请输入权限名称", trigger: "blur" }],
  code: [{ required: true, message: "请输入权限标识", trigger: "blur" }]
} as Record<string, FormItemRule[]>;

const handleSubmit = async () => {
  if (!formRef.value) return;
  await formRef.value.validate();
  loading.value = true;
  if (props.id) {
    editPlatformAuthApi({
      shop_auth_id: props.id,
      name: formData.name,
      code: formData.code
    })
      .then(res => {
        if (res.code === 1) {
          dialogVisible.value = false;
          ElMessage.success("编辑成功");
          emit("success");
          loading.value = false;
        }
      })
      .catch(() => {
        loading.value = false;
      });
  } else {
    await addPlatformAuthApi(formData)
      .then(res => {
        if (res.code === 1) {
          dialogVisible.value = false;
          ElMessage.success("新增成功");
          emit("success");
          loading.value = false;
        }
      })
      .catch(() => {
        loading.value = false;
      });
  }
};
</script>

<style lang="scss" scoped>
.vip-renewal-container {
  padding: 20px 0;
  .info-section {
    padding: 20px;
    margin-bottom: 24px;
    background: linear-gradient(to right, #f8f9fa, #ffffff);
    border-radius: 8px;
    box-shadow: 0 2px 12px 0 rgb(0 0 0 / 5%);
    .info-item {
      display: flex;
      align-items: center;
      margin-bottom: 12px;
      &:last-child {
        margin-bottom: 0;
      }
      .label {
        width: 120px;
        font-size: 14px;
        color: #606266;
      }
      .value {
        font-size: 14px;
        font-weight: 500;
        color: #303133;
      }
    }
  }
  .renewal-section {
    padding: 0 20px;
    :deep(.el-form-item__label) {
      font-weight: 500;
    }
    :deep(.el-input-number) {
      width: 100%;
    }
  }
}
.dialog-footer {
  padding-top: 20px;
  text-align: right;
}
</style>
